<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示HTML、CSS、JS各自作用</title>
    <!-- 2. CSS负责表现，给网页内容化妆 -->
    <!-- CSS通过“选择符”找见网页中的某个元素，然后设置样式（属性和属性值） -->
    <style>
        /* 网页渐变背景，文字居中，文字大小、颜色的设置 */
        body {
            background-color: black;
        }

        h1 {
            color: white;
            font-size: 55px;
        }

        span {
            color: orange;
            display: block;
        }

        /* 错误调试用
            !invalid property value 错误的属性值
            !unknown property name  未知的属性名
            划线划掉                 注释了
        */
    </style>
</head>

<body>
    <!-- 
        1. 关于注释
            html    
            css /**/
            js  //
                /**/
        2. 考虑网页三要素
            HTML    结构    一行字（变和不变）
            CSS     表现    网页渐变背景，文字居中，文字大小、颜色的设置
            JS      行为    可变文字切换
     -->


    <!-- 1. HTML负责结构，网页内容 -->
    <h1><span>学习</span>前端开发！</h1>

    <!-- 3. JS负责行为，当XX时，网页发生了一些变化 -->
    <!-- 
        选择符，找见网页某个元素
        当，事件（单击鼠标、按下向上键、刷新页面、关闭按钮时）
        改变网页（HTML、CSS）
      -->
    <script>
        // JS选择符
        let key = document.querySelector("span");
        // 直接改改变key，赋予新的值。
        // key.innerHTML = "锤炼";
        // 可变文字切换，时间变化
        // 每隔1秒钟，执行语句，学习，锤炼，擅长
        let arr = ['学习', '锤炼', '擅长'];
        let nameArr = ['baidu', 'sohu'];
        let urlArr = ['http://www.baidu.com', 'sohu.com']
        // key.innerHTML = arr[2];
        let i = 0;
        setInterval(function () {
            if (i >= 2) {
                i = 0;
            } else {
                i++;
            }
            // 把获取的新关键字置换到关键字元素中去
            key.innerHTML = arr[i];
        }, 2000);
    </script>
</body>

</html>